<template>
  <div>
    <div style="border: 1px solid #ccc;">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="html"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="onCreated"
      />

    </div>
    <el-button @click="emitPreview">
      预览
    </el-button>
    <el-button @click="emitSave" type="primary">
      保存
    </el-button>
  </div>

</template>
<script>
  import Vue from 'vue'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  import kityformula from "./kityformula";
  import { Boot } from "@wangeditor/editor";
  import formulaModule from "@wangeditor/plugin-formula";
  export default Vue.extend({
    props: {
      // 初始内容
      initialContent: {
        type: String
      },
    },
    components: { Editor, Toolbar },
    data() {
      return {
        editor: null,
        html: '',
        toolbarConfig: {
          insertKeys: {
            index: 0,
            keys: [
              "insertFormula", // “插入公式”菜单
              "kityFormula", // “编辑公式”菜单
            ],
          },
        },
        editorConfig: { placeholder: '请输入内容...' , MENU_CONF: {
          uploadImage: {
            server: process.env.VUE_APP_COURSE_BASE_URL + '/api/osa/upload',
            allowedFileTypes: ['image/*'],
            fieldName: 'file',
            withCredentials: true,
            headers: {
              Authorization: window.localStorage.getItem('authorization'),
            },


          },
          insertImage: {
            onInsertedImage(imageNode) {                    // JS 语法
              if (imageNode == null) return
              const { src, alt, url, href } = imageNode
              console.debug('inserted image', src, alt, url, href)
            },
            parseImageSrc:  src => {
              console.debug("img: ", src)
              return process.env.VUE_APP_COURSE_BASE_URL + src;
            }, // 也支持 async 函数
          }
        }},
        mode: 'default', // or 'simple'
      }
    },
    methods: {
      onCreated(editor) {
          this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
          console.debug(editor)
          if (this.initialContent) {
            this.editor.setHtml(this.initialContent)
          }
        },
        emitPreview() {
          let content = this.editor.getHtml();
          console.debug("HTML:", content)
          this.$emit('preview', content);
        },
        emitSave() {
          let content = this.editor.getHtml();
          console.debug("HTML:", content)
          this.$emit('save', content);
        },
        clear() {
          this.editor.clear() ;

        },

      },

      mounted() {

      },
      beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
      },


  })
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
